@import 'openmina';

.h-minus-lg {
	.fx-row-vert-cent {
		.circle {
			width: 8px;
			height: 8px;
			border-radius: 50%;
		}

		&:nth-child(2) .circle {
			background-color: $warn-primary;
		}

		&:nth-child(3) .circle {
			background-color: $base-tertiary;
		}

		&:nth-child(4) .circle {
			background-color: $base-secondary;
		}

		&:nth-child(5) .circle {
			background-color: $selected-primary;
		}

		&:nth-child(6) .circle {
			background-color: $success-primary;
		}
	}

	.squares {
		> div {
			position: relative;
			cursor: pointer;
			width: 18px;
			height: 18px;
			border: 1px solid $base-background;

			&::before {
				position: absolute;
				content: '';
				width: 4px;
				height: 4px;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				transition: all 0.1s ease-in-out;
			}

			&:hover::before {
				width: 100%;
				height: 100%;
			}

			&.Missing {
				background-color: $warn-container;

				&::before {
					background-color: $warn-secondary;
				}
			}

			&.Fetching {
				background-color: $base-container;

				&::before {
					background-color: $base-tertiary
				}
			}

			&.Fetched {
				background-color: $base-container;

				&::before {
					background-color: $base-secondary;
				}
			}

			&.Applying {
				background-color: $selected-container;

				&::before {
					background-color: $selected-secondary
				}
			}

			&.Applied {
				background-color: $success-container;

				&::before {
					background-color: $success-secondary;
				}
			}
		}
	}
}
